<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			
			#box{
				position: relative;
				width: 300px;
				height: 300px;
				background-color: red;
				margin: 50px auto;
			}
			
			#box .list{
				width: 300px;
				height: 100%;
				animation: move 2s linear infinite;
			}
			
			@keyframes move{
				from{transform: rotate(0)}
				to{transform: rotate(360deg)}
			}
			
			#box .list li{
				float: left;
				width: 150px;
				height: 150px;
				background-color: greenyellow;
			}
			
			#box .list li:first-child,#box .list li:last-child{
				border-radius: 0 80% 0 80%;
			}
			#box .list li:nth-child(2),#box .list li:nth-child(3){
				border-radius: 80% 0 80% 0;
			}
			
			#box button{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -100px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="list">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>

			<button>转/停</button>
		</div>

		<script type="text/javascript">
			var list = document.querySelector('.list');

            var button = document.querySelector('button');

            var flag = true;

            button.onclick = function(){
                if(flag){
                    list.style.animationPlayState = 'paused';
                }else {
                    list.style.animationPlayState = 'running';
                }

                flag = !flag;
            }

		</script>
	</body>
</html>